import React, { useEffect, useState } from 'react'
import { Button, Col, Form, Input, Popconfirm, Row, Space, Table, Tag } from 'antd'
import { Pager, PageRecord, User } from '../../../server/interface'
import { api_user } from '../../apis'
import { ColumnsType } from 'antd/es/table'
import { RoleSelect, RoleTags } from '../role/RoleSelect'
import { UserModal } from './modal'

const UserList = () => {
    const [loading, setLoading] = useState(false)
    const [res, setRes] = useState<Pager<User> | undefined>(undefined)
    const [form] = Form.useForm()
    const [pager, setPager] = useState<PageRecord>({ page: 1, pageSize: 10 })
    const [formData, setFormData] = useState<Partial<User>>({})
    const doSearch = async () => {
        setLoading(true)
        const res = await api_user.list({
            ...pager,
            params: formData,
        })
        setLoading(false)
        if (res.success) {
            setRes(res.data)
        }
    }
    useEffect(() => {
        setPager({ ...pager, page: 1 })
    }, [formData])
    useEffect(() => {
        doSearch()
    }, [pager])


    const columns: ColumnsType<User> = [
        {
            title: '序号',
            dataIndex: 'id',
            render: (_, __, index) => (pager.page - 1) * pager.pageSize + index + 1,
        },
        {
            title: '用户名',
            dataIndex: 'username',
        },
        {
            title: '姓名',
            dataIndex: 'nickname',
        },
        {
            title: '角色',
            dataIndex: 'roles',
            render: (_, u) => <RoleTags roles={u.roles} type="paragraph" />,
        },
        {
            title: '操作',
            dataIndex: 'id',
            render: (_, u) => <>
                <Popconfirm title="确认删除？" onConfirm={() => api_user.delete([u.username]).then(() => doSearch())}>
                    <Button type="link" disabled={u.readonly} title={u.readonly ? '系统内置不可删除' : undefined}>删除</Button>
                </Popconfirm>
                <UserModal buttonProps={{ type: 'link' }} user={u} onOk={doSearch}/>
            </>
        },
    ]
    return <>
        <Row style={{ marginBottom: 10 }}>
            <Col span={20}>
                <Form form={form} onFinish={setFormData} layout='inline'>
                    <Form.Item name="username" label="用户名">
                        <Input placeholder="请输入用户名" allowClear />
                    </Form.Item>
                    <Form.Item name="nickname" label="用户姓名">
                        <Input placeholder="请输入姓名" allowClear />
                    </Form.Item>
                    <Form.Item name="roles" label="用户角色">
                        <RoleSelect mode="multiple" allowClear style={{width: 160}}/>
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit">查询</Button>
                    </Form.Item>
                </Form>
            </Col>
            <Col span={4} style={{ textAlign: 'right' }}>
                <UserModal buttonProps={{ type: 'primary' }} onOk={() => setPager({ ...pager, page: 1 })}/>
            </Col>
        </Row>
        <Table
            rowKey="username"
            size="small"
            loading={loading}
            columns={columns}
            dataSource={res?.list || []}
            pagination={{
                ...pager,
                total: res?.total || 0,
                showTotal: () => `共 ${res?.total || 0} 条数据`,
                showSizeChanger: true,
                onChange(page, pageSize) {
                    setPager({page, pageSize})
                },
            }}
        />
    </>
}

export default UserList
